<div class="dux-page-header uk-clearfix">
    <div class="page-title">
        <form class="dux-form uk-form  uk-form-inline" method="get" action="{url()}">
            <div class="uk-form-group">
                <input type="date" name="start_time" class="am-form-field" value="{$pageMaps.start_time}"
                       placeholder="开始时间">
            </div>
            <div class="uk-form-group">
                <input type="date" name="stop_time" class="am-form-field" value="{$pageMaps.stop_time}"
                       placeholder="结束时间">
            </div>
            <div class="uk-form-group">
                <button type="submit" class="uk-button uk-button-primary"><i class="fa fa-search"></i></button>
            </div>
        </form>
    </div>
</div>

<div class="uk-grid uk-child-width-expand">
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">下单人数</div>
            <div class="uk-card-body uk-text-success">
                {$orderPeople}
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">下单笔数</div>
            <div class="uk-card-body uk-text-success">
                {$orderNum}
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">下单金额</div>
            <div class="uk-card-body uk-text-success">
                {$orderPrice}
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">商品销量</div>
            <div class="uk-card-body uk-text-danger">
                {$sales}
            </div>
        </div>
    </div>
</div>

<div class="uk-grid uk-child-width-expand">
    <div class="am-u-sm-12 am-u-md-3">
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">付款人数</div>
            <div class="uk-card-body uk-text-danger">
                {$payPeople}
            </div>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-3">
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">付款笔数</div>
            <div class="uk-card-body uk-text-danger">
                {$payNum}
            </div>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-3">
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">付款金额</div>
            <div class="uk-card-body uk-text-danger">
                {$payPrice}
            </div>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-3">
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-card-header">客单价</div>
            <div class="uk-card-body uk-text-danger">
                {$avgPrice}
            </div>
        </div>
    </div>
</div>
<br>
<div data-dux="table-bind">


    <div class="am-g">
        <div class="am-u-sm-12">
            <div class="uk-card uk-card-default uk-card-small dux-panel">
                <div class="uk-card-header uk-clearfix">
                    <div class="uk-float-left">
                        交易趋势
                    </div>
                    <div class="uk-float-right">
                        <a href="{url('index', $dateParams[0])}">上月</a>
                        <a href="{url('index', $dateParams[1])}">本月</a>
                        <a href="{url('index', $dateParams[2])}">近15天</a>
                        <a href="{url('index', $dateParams[3])}">近30天</a>
                    </div>
                </div>
                <div class="uk-card-body">
                    <canvas id="stats" height="400" style="height: 400px"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>


<script>
    Do('base', 'chart', 'tpl', function () {

        function showData() {
            var canvas = $('#stats').get(0);
            var ctx = canvas.getContext("2d");
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {json_encode($statsData.labels)},
            datasets: {json_encode($statsData.datasets)}
        },
            options: {
                //response: true,
                    maintainAspectRatio : false
            }
        });
        }
        showData();
    });
</script>